<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon" id="employeeInfoCBox">
      <div data-html2canvas-ignore="true" class="exportEmployeeInfoC">
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon iconfont icondaochu"
          v-sdc
          v-show="isEsUser()"
          @click="exportEmployeeInfoC"
        >
          <span class="opetareText">导出人员档案</span>
        </el-button>
      </div>
      <!-- 身份信息 -->
      <div style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">身份信息</div>
        <el-row class="itemInfo">
          <el-col :span="20">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >人员姓名：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.name || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >身份证号：</span
                >
                <span
                  class="gridContent contentSty color666 fontSizeF"
                  :title="employeeInfo.idcard"
                  >{{ employeeInfo.idcard || '--' }}</span
                >
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >人员性别：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.sexValue || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >出生日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.birthday || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >户籍：</span
                >
                <span
                  class="gridContent contentSty color666 fontSizeF"
                  :title="employeeInfo.liveAddress"
                  >{{ employeeInfo.liveAddress || '--' }}</span
                >
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >人员民族：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.nationalityValue || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >家庭住址：</span
                >
                <span
                  class="gridContent color666 fontSizeF"
                  :title="employeeInfo.address"
                  >{{ employeeInfo.address || '--' }}</span
                >
              </el-col>
              <el-col :span="12" class="labelWidthSty" v-if="!isHsUser()">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >录入时间：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.createTime || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4" style="text-align: center" class="readIdCardBox">
            <img
              :src="employeeInfo.imgPath ? employeeInfo.imgPath : errorPath"
              style="width: 100px"
            />
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <!-- 基础信息 -->
      <div style="padding: 20px 24px 30px">
        <div class="secondaryTitle secondaryTitleTheme">基础信息</div>
        <el-row>
          <el-col :span="20">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >手机号码：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.tel || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >政治面貌：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.politicalValue || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >文化程度：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.eduValue || '--'
                }}</span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >婚姻状况：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">{{
                  employeeInfo.marriageValue || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <!-- 奖惩记录 -->
      <div
        style="padding: 20px 24px 30px"
        v-if="rewardsInfo.BAD || rewardsInfo.GOOD"
      >
        <div class="secondaryTitle secondaryTitleTheme">奖惩记录</div>
        <el-row>
          <el-col :span="20">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >不良记录：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <el-link
                    type="primary"
                    @click="toRewardsList('BAD')"
                    v-if="rewardsInfo.BAD > 0"
                    >查看</el-link
                  >
                  <span v-else>--</span>
                </span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >奖励信息：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <el-link
                    type="primary"
                    @click="toRewardsList('GOOD')"
                    v-if="rewardsInfo.GOOD > 0"
                    >查看</el-link
                  >
                  <span v-else>--</span>
                </span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="spacing" v-if="rewardsInfo.BAD || rewardsInfo.GOOD"></div>
      <!-- 滁州显示劳资信息，其他区域不显示 -->
      <div style="padding: 20px 24px 30px" v-if="isCzUser() && isShowLabor">
        <div class="secondaryTitle secondaryTitleTheme">劳资信息</div>
        <el-row>
          <el-col :span="20">
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >证书编号：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <span v-if="laborInfo.auditStatus === 1">{{
                    laborInfo.certificateNumber || '--'
                  }}</span>
                  <span v-else>--</span>
                </span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >发证日期：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <span v-if="laborInfo.auditStatus === 1">{{
                    laborInfo.effectiveStartDate || '--'
                  }}</span>
                  <span v-else>--</span>
                </span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >证件到期情况：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <span v-if="laborInfo.auditStatus === 1">{{
                    laborInfo.effectiveEndDate || '--'
                  }}</span>
                  <span v-else>--</span>
                </span>
              </el-col>
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >证书附件：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <span
                    v-if="
                      laborInfo.attachmentFiles.length > 0 &&
                      laborInfo.auditStatus === 1
                    "
                  >
                    <span>已上传</span>
                    <el-link class="seeFile" @click="toUploadLaborFile()"
                      >查看</el-link
                    >
                    <contractEnclosureDialog
                      v-if="uploadLaborFile"
                      dialogTitle="证书附件"
                      :tableData="laborInfo.attachmentFiles"
                      @closeDialog="hiddenLaborDialog"
                    ></contractEnclosureDialog>
                  </span>
                  <span v-else>未上传</span>
                </span>
              </el-col>
            </el-row>
            <el-row class="detailInfoItemSty">
              <el-col :span="12" class="labelWidthSty">
                <span class="gridContent color333 fontSizeF fontWeight"
                  >企业任命文件：</span
                >
                <span class="gridContent contentSty color666 fontSizeF">
                  <span
                    v-if="
                      laborInfo.empAppointFiles.length > 0 &&
                      laborInfo.auditStatus === 1
                    "
                  >
                    <span>已上传</span>
                    <el-link class="seeFile" @click="toEmpAppointFile()"
                      >查看</el-link
                    >
                    <contractEnclosureDialog
                      v-if="empAppointFile"
                      dialogTitle="证书附件"
                      :tableData="laborInfo.empAppointFiles"
                      @closeDialog="hiddenEmpAppointDialog"
                    ></contractEnclosureDialog>
                  </span>
                  <span v-else>未上传</span>
                </span>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="spacing" v-if="isCzUser() && isShowLabor"></div>
      <!-- 务工经历 -->
      <div style="padding: 20px 24px 30px">
        <div class="employeeExperienceBox">
          <div class="secondaryTitle secondaryTitleTheme">工作经历</div>
          <div v-if="experienceInfo.length">
            <el-row
              class="experienceInfoBox"
              v-for="(item, index) of experienceInfo"
              :key="index"
            >
              <div class="gridContent color333 fontSizeE fontWeight">
                {{ item.projectName || '--' }}
              </div>
              <div
                class="gridContent empDetailInfoItemSty color333 fontSizeF fontWeight"
              >
                {{ item.companyName || '--' }} | {{ item.groupName || '--' }} |
                {{ item.workTypeName || '--' }}
              </div>
              <el-row class="empDetailInfoItemSty">
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF">录用时间：</span>
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.startDate || '--'
                  }}</span>
                </el-col>
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF"
                    >工资卡银行：</span
                  >
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.bankName || '--'
                  }}</span>
                </el-col>
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF">考勤信息：</span>
                  <span class="gridContent empContentSty color333 fontSizeF"
                    ><el-link
                      class="linkItem"
                      type="primary"
                      @click="seeAttendance(item.projectId)"
                      >查看</el-link
                    ></span
                  >
                </el-col>
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF">合同状态：</span>
                  <span class="gridContent empContentSty color333 fontSizeF">
                    <span
                      v-if="
                        item.isFileDesc == '已上传' && item.isConfirmed == 0
                      "
                      class="blueColor"
                    >
                      <el-link
                        class="linkItem"
                        type="primary"
                        @click="toContractFileDia(item.id, 'second')"
                        >已签订</el-link
                      >
                    </span>
                    <span
                      v-else-if="
                        item.isFileDesc == '已上传' || item.isConfirmed == 1
                      "
                      class="blueColor"
                    >
                      <el-link
                        class="linkItem"
                        type="primary"
                        @click="toContractFileDia(item.id, 'first')"
                        >已签订</el-link
                      >
                    </span>
                    <span v-else>
                      <el-link
                        class="linkItem"
                        type="primary"
                        @click="toContractFileDia(item.id, 'first')"
                        >未签订</el-link
                      >
                    </span>
                  </span>
                </el-col>
              </el-row>
              <el-row class="empDetailInfoItemSty">
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF">离职时间：</span>
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.overDate || '--'
                  }}</span>
                </el-col>
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF"
                    >银行卡卡号：</span
                  >
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.account || '--'
                  }}</span>
                </el-col>
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF">工资信息：</span>
                  <span class="gridContent empContentSty color333 fontSizeF"
                    ><el-link
                      class="linkItem"
                      type="primary"
                      @click="seeSalary(item.uscc, item.projectId)"
                      >查看</el-link
                    ></span
                  >
                </el-col>
              </el-row>
              <el-row class="empDetailInfoItemSty">
                <el-col :span="6" class="empLabel">
                  <span class="gridContent color333 fontSizeF">离职原因：</span>
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.reason || '--'
                  }}</span>
                </el-col>
                <el-col :span="6" class="empLabel" v-if="!isHsUser()">
                  <span class="gridContent color333 fontSizeF">计量单位：</span>
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.unitName || '--'
                  }}</span>
                </el-col>
                <el-col :span="6" class="empLabel" v-if="!isHsUser()">
                  <span class="gridContent color333 fontSizeF">计量单价：</span>
                  <span class="gridContent empContentSty color333 fontSizeF">{{
                    item.price == null ? '--' : item.price + '元'
                  }}</span>
                </el-col>
              </el-row>
            </el-row>
          </div>
          <div class="noDeduction" v-else>
            <img src="../../../static/img/noData.png" alt />
            <div class="text fS color999">暂无工作经历信息</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 查看考勤弹窗 -->
    <el-dialog
      title="查看考勤"
      :visible.sync="showAttendance"
      class="attendanceDialog"
      width="900px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-row>
        <el-form :inline="true" :model="attendanceForm" ref="attendanceForm">
          <el-form-item label="考勤日期" class="row-padding-bottom">
            <el-date-picker
              v-model="date"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="状态"
            class="row-padding-bottom"
            style="margin-left: 20px"
          >
            <el-select
              v-model="attendanceForm.inRange"
              clearable
              placeholder="请选择"
            >
              <el-option label="范围内" value="1"></el-option>
              <el-option label="范围外" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 14px">
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchAttendance"
              class="commonBtn"
            ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchAttendance"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icondaochu"
              @click="exportAtt"
              style="margin-left: 8px !important"
            >
              <span class="opetareText">导出</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 列表 -->
      <el-table
        :data="attendanceData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="attendanceLoading"
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          align="center"
          prop="employeeName"
          label="姓名"
          width="140"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="idcard"
          label="身份证号"
          width="180"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="attDate"
          label="打卡日期"
          width="180"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="打卡地址"
          width="230"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.address"
              :columnName="'address'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="path"
          label="打卡图片"
          width="120"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.path"
              class="dialogTable"
              style="width: 60px"
              :src="scope.row.path"
              :preview-src-list="scope.row.attendanceImgList"
            ></el-image>
            <img
              v-else
              src="../../../static/img/employee/card.png"
              alt
              width="60px"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="inRangeDesc"
          label="状态"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="direction"
          label="方向"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.direction == 1">进场</span>
            <span v-else-if="scope.row.direction == 0">出场</span>
            <span v-else>无方向</span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="remark" label="备注" width="200">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.remark"
              :columnName="'remark'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="attTypeDesc"
          label="打卡方式"
          width="120"
          :formatter="formatTd"
        ></el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isAttendanceEmpty">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <!-- filterField为搜索条件 -->
      <Pagination
        ref="attendancePagination"
        @getList="getAttendanceTable"
        :filterField="attendanceForm"
        :requestUrl="attendanceUrl"
        class="mrT24"
      ></Pagination>
    </el-dialog>
    <!-- 查看工资弹窗 -->
    <el-dialog
      title="查看工资"
      :visible.sync="showSalary"
      class="salaryDialog"
      width="920px"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-row>
        <el-form :inline="true" :model="salaryForm" ref="salaryForm">
          <el-form-item label="发薪年份" class="row-padding-bottom">
            <el-date-picker
              v-model="salaryForm.year"
              type="year"
              value-format="yyyy"
              placeholder="选择年份"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="发薪月份"
            class="row-padding-bottom"
            style="margin-left: 14px"
          >
            <el-select
              v-model="salaryForm.month"
              clearable
              placeholder="选择月份"
            >
              <el-option
                v-for="(item, index) in monthSelct"
                :key="index"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 8px">
            <!-- <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchSalary"
              class="commonBtn"
            ></el-button> -->
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchSalary"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item style="margin-left: 8px">
            <exportBtn
              :dataLen="salaryData.length"
              :filterField="salaryForm"
              api="api-s/report/export_JC_CS_SALARYFOREMP"
            ></exportBtn>
          </el-form-item>
        </el-form>
      </el-row>
      <!-- 列表 -->
      <el-table
        :data="salaryData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        v-loading="salaryLoading"
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          align="left"
          prop="salarySendStr"
          label="工资年月"
          :formatter="formatTd"
          min-width="230"
          fixed="left"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="createTime"
          label="发放时间"
          :formatter="formatTd"
          width="160"
          v-if="!isHsUser()"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="statusDesc"
          label="发放状态"
          :formatter="formatTd"
          width="140"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="shouldPay"
          label="应发金额"
          :formatter="formatTd"
          min-width="140"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="bankActPay"
          label="实发金额"
          :formatter="formatTd"
          min-width="140"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="attTotal"
          label="考勤天数"
          :formatter="formatTd"
          min-width="120"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="tel"
          label="电话"
          :formatter="formatTd"
          width="180"
        ></el-table-column>
        <!-- <el-table-column align="center" prop="remark" label="备注" :formatter="formatTd"></el-table-column> -->
        <el-table-column label="备注" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.remark"
              :columnName="'remark'"
            ></copyText>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isSalaryEmpty">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <!-- filterField为搜索条件 -->
      <Pagination
        ref="salaryPagination"
        @getList="getSalaryTable"
        :filterField="salaryForm"
        :requestUrl="salaryUrl"
        class="mrT24"
      ></Pagination>
    </el-dialog>
    <!-- 合同状态弹框 -->
    <el-dialog
      title=""
      :visible.sync="contractFile"
      width="900px"
      :modal-append-to-body="false"
      :before-close="handleClose"
      class="fileDiabox"
      :append-to-body="true"
    >
      <div slot="title" class="dialogTitle">
        <el-radio-group
          v-model="activetab"
          @change="handleClick"
          class="tabsContainer"
        >
          <el-radio-button label="first">电子合同</el-radio-button>
          <el-radio-button label="second">合同附件</el-radio-button>
        </el-radio-group>
      </div>
      <div class="reminder">
        <i class="el-icon-warning"></i>
        <span>电子合同签订与上传合同附件，只需签订其中一种即为已签订合同</span>
      </div>
      <div style="padding: 16px 20px">
        <div v-if="!htmlData" v-show="activetab === 'first'">
          <!-- 滁州定制合同 -->
          <CZemployeeContract
            :contractInfos="contractInfos"
            @exportContract="exportContract"
            v-if="isShowCZ"
          ></CZemployeeContract>
          <!-- 宜昌定制合同 -->
          <YCContract
            :contractInfos="contractInfos"
            @exportContract="exportContract"
            v-else-if="isYccontractArea"
          ></YCContract>
          <!-- 武汉合同模板 -->
          <WHContract
            :contractInfos="contractInfos"
            @exportContract="exportContract"
            v-else-if="isWhcontractArea"
          ></WHContract>
          <!-- 黄石合同模板 -->
          <HSContract
            :contractInfos="contractInfos"
            @exportContract="exportContract"
            v-else-if="isHscontractArea"
          ></HSContract>
          <!-- 公共合同模板 -->
          <CommonContract
            :contractInfos="contractInfos"
            @exportContract="exportContract"
            v-else
          ></CommonContract>
        </div>
        <div v-else class="diyContract" v-show="activetab === 'first'">
          <el-button
            class="saveBtn diyExportContract"
            @click="diyExportContract"
            >导出</el-button
          >
          <div v-html="htmlData" style="padding: 30px 40px"></div>
        </div>
        <div v-show="activetab === 'second'" style="margin-top: 16px">
          <contractEnclosure :tableData="uploadImg" />
        </div>
      </div>
      <div v-show="activetab === 'first'" slot="footer" class="dialogFooter">
        <ul>
          <li>创建时间：{{ contractInfos.createTime || '--' }}</li>
          <li>
            签订状态：
            <span
              class="confirmedStatus confirmed"
              v-if="contractInfos.isConfirmed == 1"
            >
              已签订
            </span>
            <span class="confirmedStatus noConfirmed" v-else> 未签订 </span>
          </li>
          <li v-if="isShowCZ">
            签订时间：{{ contractInfos.agreeDate || '--' }}
          </li>
          <li v-else>签订时间：{{ contractInfos.confirmDate || '--' }}</li>
        </ul>
      </div>
    </el-dialog>
  </div>
  <!-- </div> -->
</template>
<script>
import htmlDocx from 'html-docx-js/dist/html-docx'
import saveAs from 'file-saver'
import common from '../../kits/common'
import YCContract from '@/components/publicCom/YCContract'
import WHContract from '@/components/publicCom/WHContract'
import HSContract from '@/components/publicCom/HSContract'
import CommonContract from '@/components/publicCom/CommonContract'
import CZemployeeContract from '@/components/employee/CZemployeeContract'
import contractEnclosure from '@/components/publicCom/contractEnclosure'
export default {
  name: 'employeeInfoC',
  components: {
    contractEnclosure,
    YCContract,
    CommonContract,
    CZemployeeContract,
    WHContract,
    HSContract,
  },
  data() {
    return {
      htmlData: '',
      back: true,
      employeeId: '',
      projectId: '',
      titleText: '人员档案',
      loginType: '', //用户类型
      projectName: '恩施市金龙大道南段道路',
      state: 'STARTED',
      employeeInfo: {},
      experienceInfo: [],
      errorPath: require('../../../static/img/employee/card.png'),
      path: '',
      uploadImg: [],
      uploadContract: false, //合同附件,
      contractdetail: false, //合同状态
      contractInfos: '', //当前合同信息
      radio: 'untime', //合同工时选项
      showAttendance: false, //查看考勤弹窗
      showSalary: false, //查看工资弹窗
      attendanceForm: {
        attStartDate: '',
        attEndDate: '',
        inRange: '',
        projectId: '',
        employeeId: '',
      },
      attendanceData: [],
      attendanceImgList: [],
      attendanceLoading: true,
      isAttendanceEmpty: false,
      attendanceUrl: 'api-att/cs/att/expand/findattforemp',
      salaryForm: {
        year: '',
        month: '',
        projectId: '',
        uscc: '',
        employeeId: '',
      },
      salaryData: [],
      salaryLoading: true,
      isSalaryEmpty: false,
      salaryUrl: 'api-su/cs/salary/expand/findsalaryforemp',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      date: [], //考勤日期
      type: '',
      isYccontractArea: false, //哪个区域的合同模板
      isWhcontractArea: false,
      isHscontractArea: false, //黄石
      isShowCZ: false,
      contractFile: false, //合同状态弹框
      activetab: 'first',
      rewardAndPunishInfo: [], //奖惩信息
      laborInfo: {
        files: [],
      }, //劳资信息
      uploadLaborFile: false, //劳资证书附件
      id: '', //劳资专管员列表id
      isShowLabor: false,
      // 奖励及不良信息
      rewardsInfo: '',
      empAppointFile: false, //企业任命文件
    }
  },
  created() {
    this.type = this.$route.query.type //监察贫困户PQ
    this.isFB = this.$route.query.isFB
    this.loginType = localStorage.getItem('loginType')
    this.employeeId = this.$route.query.employeeId
    this.projectId = this.$route.query.projectId
    this.attendanceForm.employeeId = this.$route.query.employeeId
    this.id = this.$route.query.id
    if (this.isFB) {
      this.$store.commit('set_active_index', '/home/employee/projectEmployeeFb')
      this.$store.state.activeMenu = '/home/employee/projectEmployeeFb'
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/employee/projectEmployeeFb',
        newUrl: this.$router.currentRoute.fullPath,
      })
    } else {
      if (this.loginType === 'QY' || this.loginType === 'XM') {
        this.$store.commit(
          'set_active_index',
          '/home/employee/projectEmployeeQY'
        )
        this.$store.state.activeMenu = '/home/employee/projectEmployeeQY'
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/projectEmployeeQY',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        if (this.type == 'PQ') {
          // 贫困户详情返回贫困户列表
          this.$store.state.activeMenu =
            '/home/enShiCustomRequirements/poorHouseholds'
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/enShiCustomRequirements/poorHouseholds',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else if (this.type == 'laborListCz') {
          //滁州劳资专管员列表
          this.$store.state.activeMenu = '/home/employee/laborListCz'
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/employee/laborListCz',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else if (this.type == 'laborInfoAuditCz') {
          //滁州劳资劳资资质审核(监察)
          this.$store.state.activeMenu = '/home/employee/laborInfoAuditCz'
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/employee/laborInfoAuditCz',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          // 花名册过来返回花名册列表
          this.$store.state.activeMenu = '/home/employee/employeeTotalListJC'
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/employee/employeeTotalListJC',
            newUrl: this.$router.currentRoute.fullPath,
          })
        }
      }
    }

    //从企业端项目人员+监察端项目人员、花名册聚合页跳入
    this.path = this.$route.query.path
    //获取人员基本信息
    this.getEmployeeInfo()
    //获取务工经历
    this.getEmployeeExperience()
    //显示哪里的合同模板
    if (this.isYcUser()) {
      this.isYccontractArea = true
    } else {
      this.isYccontractArea = false
    }
    if (this.isWhUser()) {
      this.isWhcontractArea = true
    } else {
      this.isWhcontractArea = false
    }
    if (this.isCzUser()) {
      this.isShowCZ = true
    } else {
      this.isShowCZ = false
    }
    if (this.isHsUser()) {
      this.isHscontractArea = true
    } else {
      this.isHscontractArea = false
    }
    //获取人员档案劳资信息
    this.getLaborInfo()
  },
  computed: {
    monthSelct() {
      var monthSelct = []
      for (var i = 1; i <= 12; i++) {
        var obj = {}
        obj.value = i >= 10 ? i : '0' + i
        obj.label = i + '月'
        monthSelct.push(obj)
      }
      return monthSelct
    },
  },
  mounted() {},
  methods: {
    //获取人员基本信息
    getEmployeeInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/build/expand/detail',
        data: {
          employeeId: this.employeeId,
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.employeeInfo = res.data.result
              this.getDetail(this.employeeInfo.name, this.employeeInfo.idcard)
              // 奖励及不良信息
              this.getCountbyemployee(
                this.employeeInfo.name,
                this.employeeInfo.idcard
              )
            } else {
              this.$message.error('获取人员基本信息失败')
            }
          },
          (res) => {
            this.$message.error('获取人员基本信息失败')
          }
        )
        .catch((error) => {})
    },
    //获取务工经历
    getEmployeeExperience() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/detail',
        data: {
          employeeId: this.employeeId,
          projectId: this.projectId,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.experienceInfo = res.data.result
            } else {
              this.$message.error(res.data.errorMsg)
            }
          },
          (res) => {
            this.$message.error('获取务工经历数据失败')
          }
        )
        .catch((error) => {})
    },
    goBack() {
      if (this.isFB) {
        this.$router.push({
          path: '/home/employee/projectEmployeeFb',
          name: 'projectEmployeeFb',
          query: {
            projectId: this.projectId,
          },
        })
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/employee/projectEmployeeFb',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        if (this.loginType === 'QY' || this.loginType === 'XM') {
          this.$router.push({
            path: '/home/employee/projectEmployeeQY',
            name: 'projectEmployeeQY',
            query: {
              projectId: this.projectId,
            },
          })
          this.$store.commit('GOBACK_NAME', {
            oldUrl: '/home/employee/projectEmployeeQY',
            newUrl: this.$router.currentRoute.fullPath,
          })
        } else {
          if (this.type == 'PQ') {
            //贫困户
            this.$router.push('/home/enShiCustomRequirements/poorHouseholds')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/enShiCustomRequirements/poorHouseholds',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else if (this.type == 'laborListCz') {
            //滁州劳资专管员列表
            this.$router.push('/home/employee/laborListCz')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/employee/laborListCz',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else if (this.type == 'laborInfoAuditCz') {
            //滁州劳资劳资资质审核(监察)
            this.$router.push('/home/employee/laborInfoAuditCz')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/employee/laborInfoAuditCz',
              newUrl: this.$router.currentRoute.fullPath,
            })
          } else {
            this.$router.push('/home/employee/employeeTotalListJC')
            this.$store.commit('GOBACK_NAME', {
              oldUrl: '/home/employee/employeeTotalListJC',
              newUrl: this.$router.currentRoute.fullPath,
            })
          }
        }
      }
    },
    toUploadFile(id) {
      this.uploadImg = []
      //   this.saveImgArr = [];
      //   this.srcList = [];
      //   this.oldSrcList = [];
      this.getUploadSearchImg(id)
      this.uploadContract = true
    },
    // 获取附件查询图片
    getUploadSearchImg(id) {
      var data = {
        associatedName: 'T_CS_EMPLOYEE_CONTRACT',
        associatedId: id,
      }
      this.axios({
        method: 'post',
        url: 'api-f/files/list',
        data: data,
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.uploadImg = response.data.result
          } else {
            this.$message.error(res.data.errorMsg)
          }
        })
        .catch((error) => {})
    },
    //查看考勤
    seeAttendance(projectId) {
      this.showAttendance = true
      //考勤日期
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      var date = now.getDate()
      var endTime = year + '-' + month + '-' + date
      var startTime = year + '-' + month + '-' + '01'
      this.date = [startTime, endTime]
      this.attendanceForm.attStartDate = startTime
      this.attendanceForm.attEndDate = endTime
      this.attendanceForm.inRange = ''
      this.attendanceForm.projectId = projectId
      this.$nextTick(function () {
        this.$refs.attendancePagination.getTableListData()
      })
    },
    //考勤搜索
    searchAttendance() {
      if (this.date) {
        this.attendanceForm.attStartDate = this.date[0]
        this.attendanceForm.attEndDate = this.date[1]
      } else {
        this.attendanceForm.attStartDate = ''
        this.attendanceForm.attEndDate = ''
      }
      this.$refs.attendancePagination.getTableListData()
    },
    //加载考勤列表
    getAttendanceTable(data) {
      this.attendanceData = data
      this.attendanceLoading = false
      if (this.attendanceData.length < 1) {
        this.isAttendanceEmpty = true
      } else {
        this.isAttendanceEmpty = false
        this.attendanceImgList = []
        for (var i = 0; i < this.attendanceData.length; i++) {
          this.attendanceImgList.push(this.attendanceData[i].path)
        }
        for (var i = 0; i < this.attendanceData.length; i++) {
          var container = this.attendanceImgList
          var frontArr = container.slice(0, i)
          var behindArr = container.slice(i, this.attendanceData.length)
          var list = behindArr.concat(frontArr)
          this.attendanceData[i].attendanceImgList = list
        }
      }
    },
    // 导出自定义合同
    diyExportContract() {
      let exportHtml = this.htmlData.replace(
        /class='showContractText'/g,
        "style='color: #333;text-decoration: underline'"
      )
      let page =
        '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>' +
        exportHtml +
        '</body></html>'
      let converted = htmlDocx.asBlob(page)
      saveAs(converted, '农民工简易劳务合同.docx')
    },
    // 获取自定义合同
    getTemplateHtml(contractId) {
      return this.axios({
        method: 'post',
        url: 'api-e/cs/contract/expand/exportcondetail',
        data: {
          contractId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            if (response.data.result && response.data.result.html) {
              this.htmlData = response.data.result.html
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    async confirmContract(id) {
      this.contractId = id
      var url = ''
      await this.getTemplateHtml(id)
      if (this.isYcUser()) {
        //   console.log('yichang')
        url = 'api-e/cs/contract/expand/employeecontractinfo'
      } else if (this.isCzUser()) {
        // this.isShowCZ = true;
        url = 'api-e/cs/contract/expand/exportcontractdetail'
      } else if (this.isWhUser()) {
        //  console.log('wuhan')
        url = 'api-e/cs/contract/expand/wh/employeecontractinfo'
      } else if (this.isHsUser()) {
        url = 'api-e/cs/contract/expand/hs/employeecontractdetail'
      } else {
        url = 'api-e/cs/contract/expand/exportcondetail'
      }
      this.axios({
        method: 'post',
        url: url,
        data: {
          contractId: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.contractInfos = response.data.result
            } else {
              this.$message({
                type: 'error',
                message: '合同信息获取失败',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    exportContract() {
      var url = ''
      if (this.isCzUser()) {
        url = 'api-e/cs/contract/expand/exportemployeecontract'
      } else if (this.isYcUser()) {
        url = 'api-e/cs/contract/expand/onlineexportcontract'
      } else if (this.isWhUser()) {
        url = 'api-e/cs/contract/expand/wh/onlineexportcontract'
      } else if (this.isEsUser()) {
        url = 'api-e/cs/contract/expand/es/exportcontract'
      } else if (this.isHsUser()) {
        url = 'api-e/cs/contract/expand/hs/exportcontract'
      } else {
        url = 'api-e/cs/contract/expand/exportcontract'
      }
      window.location.href =
        common.commonApi +
        url +
        '?contractId=' +
        this.contractId +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
    //查看工资
    seeSalary(uscc, projectId) {
      this.showSalary = true
      this.salaryForm.year = ''
      this.salaryForm.month = ''
      this.salaryForm.projectId = projectId
      this.salaryForm.uscc = uscc
      this.salaryForm.employeeId = this.employeeId
      this.$nextTick(function () {
        this.$refs.salaryPagination.getTableListData()
      })
    },
    //工资搜索
    searchSalary() {
      this.$refs.salaryPagination.getTableListData()
    },
    //加载工资列表
    getSalaryTable(data) {
      this.salaryData = data
      this.salaryLoading = false
      if (this.salaryData.length < 1) {
        this.isSalaryEmpty = true
      } else {
        this.isSalaryEmpty = false
      }
    },
    exportAtt() {
      if (this.attendanceData.length > 0) {
        if (this.date) {
          this.attendanceForm.attStartDate = this.date[0]
          this.attendanceForm.attEndDate = this.date[1]
        } else {
          this.attendanceForm.attStartDate = ''
          this.attendanceForm.attEndDate = ''
        }
        window.location.href =
          common.commonApi +
          'api-att/cs/att/expand/empAttReport?projectId=' +
          this.attendanceForm.projectId +
          '&inRange=' +
          this.attendanceForm.inRange +
          '&attStartDate=' +
          this.attendanceForm.attStartDate +
          '&attEndDate=' +
          this.attendanceForm.attEndDate +
          '&employeeId=' +
          this.employeeId +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'warning',
          message: '无数据导出',
        })
      }
    },
    handleClick(tab, event) {},
    toContractFileDia(id, activetab) {
      if (activetab == 'second') {
        this.activetab = 'second'
      } else {
        this.activetab = 'first'
      }
      this.contractFile = true
      this.toUploadFile(id)
      this.confirmContract(id)
    },
    handleClose() {
      this.contractFile = false
      this.activetab = 'first'
    },
    getDetail(name, idcard) {
      this.axios({
        method: 'post',
        url: 'api-r/reward/expand/findRewardForCompanyOrPerson',
        data: {
          employeeName: name,
          idcard: idcard,
          type: 'PERSON',
        },
      })
        .then((response) => {
          this.rewardAndPunishInfo = response.data.result
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    toUploadLaborFile() {
      this.uploadLaborFile = true
    },
    hiddenLaborDialog() {
      this.uploadLaborFile = false
    },
    // 任命书查看
    toEmpAppointFile() {
      this.empAppointFile = true
    },
    hiddenEmpAppointDialog() {
      this.empAppointFile = false
    },
    getLaborInfo() {
      this.axios({
        method: 'post',
        url: 'api-e/cs/qualification/expand/contractdetail',
        data: {
          employeeId: this.employeeId,
          id: this.id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            if (res.data.result.hasQualification === true) {
              this.laborInfo = res.data.result.employeeQualification
              this.isShowLabor = true
            } else {
              this.laborInfo = {}
              this.isShowLabor = false
            }
          }
        })
        .catch((error) => {})
    },
    getCountbyemployee(name, idcard) {
      if (localStorage.getItem('judgeRoleCode') == 'company') {
        var searchType = 'nc'
      } else {
        var searchType = 'cs'
      }
      this.axios({
        method: 'post',
        url: 'api-r/employee/creditrecord/countbyemployee',
        data: {
          idcard: idcard,
          name: name,
          searchType: searchType,
        },
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              this.rewardsInfo = res.data.result
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message.error('获取信息失败')
          }
        )
        .catch((error) => {})
    },
    // 跳转到列表
    toRewardsList(type) {
      var url = ''
      if (type == 'BAD') {
        url = '/home/worker/badRecord'
      } else {
        url = '/home/worker/rewards'
      }
      this.$router.push({ path: url, query: { name: this.employeeInfo.name } })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: url,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 导出务工人员信息
    async exportEmployeeInfoC() {
      await this.uploadPdf()
      await this.getPdf('employeeInfoCBox', this.employeeInfo.name)
      this.delEmptyDiv()
    },
    delEmptyDiv() {
      var emptyDivArr = document.querySelectorAll('.emptyDiv')
      emptyDivArr.forEach((item) => {
        item.parentNode.removeChild(item)
      })
    },
    isSplit(nodes, index, pageHeight, employeeExperienceBoxHeight) {
      // 计算当前这块dom是否跨越了a4大小，以此分割
      // offsetTop  页面卷去的高度
      // offsetHeight 页面可视区的高度
      // 上一个高度小于页面高度&&下一个高度大于页面高度
      if (
        nodes[index].offsetTop +
          nodes[index].offsetHeight +
          employeeExperienceBoxHeight <
          pageHeight &&
        nodes[index + 1] &&
        nodes[index + 1].offsetTop +
          nodes[index + 1].offsetHeight +
          employeeExperienceBoxHeight >
          pageHeight
      ) {
        return true
      }
      return false
    },
    uploadPdf() {
      const A4_WIDTH = 592.28
      const A4_HEIGHT = 841.89
      let imageWrapper = document.querySelector('#employeeInfoCBox') // 获取DOM
      let pageHeight = (imageWrapper.scrollWidth / A4_WIDTH) * A4_HEIGHT
      // 67为标题栏的高度
      let employeeExperienceBoxHeight =
        document.querySelector('.employeeExperienceBox').offsetTop - 67
      let lableListID = imageWrapper.querySelectorAll('.experienceInfoBox')
      // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
      for (let i = 0; i < lableListID.length; i++) {
        // 多少页
        let multiple = Math.ceil(
          (lableListID[i].offsetTop +
            lableListID[i].offsetHeight +
            employeeExperienceBoxHeight) /
            pageHeight
        )
        if (
          this.isSplit(
            lableListID,
            i,
            multiple * pageHeight,
            employeeExperienceBoxHeight
          )
        ) {
          let divParent = lableListID[i].parentNode // 获取该div的父节点
          let newNode = document.createElement('div')
          newNode.className = 'emptyDiv'
          newNode.style.background = '#ffffff'
          let _H =
            multiple * pageHeight -
            (lableListID[i].offsetTop +
              lableListID[i].offsetHeight +
              employeeExperienceBoxHeight)
          //留白
          newNode.style.height = _H + 30 + 'px'
          newNode.style.width = '100%'
          let next = lableListID[i].nextSibling // 获取div的下一个兄弟节点
          // 判断兄弟节点是否存在
          if (next) {
            // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
            divParent.insertBefore(newNode, next)
          } else {
            // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
            divParent.appendChild(newNode)
          }
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '../../../static/css/filterArea.less';
// 务工经历盒子
.employeeExperienceBox {
  .experienceInfoBox {
    padding: 15px;
    font-size: 14px;
    // line-height: 30px;
    border: 1px solid #dcdfe6;
    color: #333;
    margin-top: 15px;
    .projectName {
      font-size: 18px;
      color: #333;
      font-weight: 700;
    }
    .mrlf10 {
      margin-left: 10px;
    }
    .linkBox span:not(:first-child) {
      margin-left: 78px;
    }
    .aLink {
      color: #409eff;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.padding15 {
  padding: 15px 0px;
}
.blueColor {
  color: #67ace4;
  cursor: pointer;
}
.lineH35 {
  line-height: 25px;
}
.mainCon {
  padding: 0;
  // height: calc(100% - 67px);
}
.labelWidth {
  display: inline-block;
  font-size: 14px;
  color: #666666;
  line-height: 1;
  padding: 11px 0;
  vertical-align: top;
  width: 70px;
}
.information {
  display: inline-block;
  font-size: 14px;
  color: #151515;
  line-height: 1;
  padding: 11px 0;
  width: calc(100% - 85px);
}
.titleInfo {
  font: 18px/50px Microsoft YaHei;
}
.identityInfo,
.basicInfo,
.contractInfo {
  padding: 15px 0 5px 0;
}
.identityInfoTitle {
  color: #009588;
}
.basicInfoTitle {
  color: #67ace4;
}
.laborInfoTitle {
  color: #3e5265;
}
.contractInfoTitle {
  color: #f9a243;
}
.imgStyle {
  margin-left: 16px;
  li {
    position: relative;
    margin-right: 20px;
    margin-top: 10px;
    i {
      position: absolute;
      right: -6px;
      top: -10px;
      font-size: 20px;
    }
  }
}
.el-divider {
  margin: 0px;
}
//在线合同
#readContract h4 {
  text-align: center;
}
#readContract ul li {
  list-style: none;
}
.content {
  padding: 5px 35px;
}
.content li {
  margin-bottom: 20px;
  text-align: left;
}
.content li ul li {
  margin-bottom: 0px;
  padding-left: 20px;
}
#readContract .content .partyA {
  margin-top: 20px;
}

#readContract .content .partyA li,
#readContract .content .partyB li {
  padding-left: 0px;
}
#readContract .content .partyA #companyName {
  display: inline-block;
  padding: 0px;
  width: 235px;
}
#readContract .content .partyA #companyCode {
  display: inline-block;
  padding: 0px;
  width: 243px;
}
#readContract .content .partyA #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 272px;
}
#readContract .content .partyB#companyCode {
  display: inline-block;
  padding: 0px;
  width: 239px;
}
#readContract .content .partyB #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 263px;
}
#readContract .content .partyB #employeeName {
  display: inline-block;
  padding: 0px;
  width: 248px;
}
#readContract .content .partyB #employeeBirthday {
  display: inline-block;
  padding: 0px;
  width: 299px;
}
#readContract .content .partyB #employeeIdcard {
  display: inline-block;
  width: 285px;
  padding: 0px;
}
.content li div {
  padding-left: 20px;
}
.content li span {
  text-align: center;
  padding: 0px 15px;
  border-bottom: 1px solid black;
}
.content li p {
  margin-bottom: 0px;
  font-size: 14px;
}
.content li div input {
  height: 18px;
  width: 18px;
  vertical-align: bottom;
  margin-right: 10px;
  opacity: 1;
  position: static;
  margin-left: 50px;
}
.content li div label:nth-child(2) {
  margin-left: 50px;
}
#readContractWin + .dialog-button > a {
  opacity: 0;
}

.exportContract {
  float: right;
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
}
.imgCss {
  width: 100px;
  margin-right: 50px;
}
.attendanceDialog .el-form--inline .el-form-item {
  margin-right: 0px;
}

.pic img {
  vertical-align: top;
  width: 40%;
}

.singleBox div {
  widows: 50%;
}
/deep/ .dialogTable img {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}
.dialogTitle p {
  color: #333;
  font-size: 18px;
  line-height: 24px;
  span {
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
}
// 页面提示
.reminder {
  color: #666;
  font-size: 14px;
  background: #fffbe6;
  line-height: 36px;
  border-radius: 3px;
  padding: 0 24px;
  i {
    color: #ffaa00;
    margin-right: 4px;
    font-size: 20px;
    vertical-align: -2px;
  }
  span {
    color: #ff4d4a;
  }
}
.fileDiabox /deep/ .el-dialog__body,
.fileDiabox /deep/ .el-dialog__footer {
  background: #fff !important;
  padding: 0 !important;
}
.fileDiabox /deep/ .el-dialog__headerbtn {
  top: 25px !important;
}
/deep/ .el-tabs__nav-scroll {
  padding: 0 40px;
}
.fileDiabox /deep/ .el-dialog__body {
  padding: 0 20px 40px 20px;
}
// 合同附件底部样式
.dialogFooter {
  ul {
    border-top: 1px solid #d5dee7;
    background: #f0f4f7;
    width: 100%;
    height: 66px;
    // border-radius: 0 0 16px 16px;
    padding: 24px;
    font-size: 14px;
    color: #333;
    border-radius: 0px 0px 4px 4px;
    li {
      width: 30%;
      display: inline-block;
      text-align: left;
      /* 签订状态 */
      .confirmedStatus {
        padding: 4px 12px;
        color: #fff;
        font-size: 12px;
      }
      .confirmed {
        background: #5fab2b;
      }
      .noConfirmed {
        background: #647382;
      }
    }
  }
}
.diyContract {
  position: relative;
  .diyExportContract {
    position: absolute;
    right: 20px;
    top: 30px;
    height: 32px;
    font-size: 14px;
    padding: 0 10px;
  }
  /deep/ .showContractText {
    color: #333 !important;
    text-decoration: underline !important;
  }
}

.exportEmployeeInfoC {
  position: absolute;
  right: 24px;
  top: 8px;
}
.noDeduction {
  text-align: center;
  margin-top: 48px;
  img {
    width: 160px;
    margin-bottom: 15px;
  }
}
</style>
